<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login Page</title>
    <link rel="icon" href="admin/images/favicon.ico">
    <link rel="shortcut icon" href="admin/images/favicon.ico" type="image/x-icon" />
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="component/pear/css/pear.css"/>
    <link rel="stylesheet" href="admin/css/other/login.css"/>
    <style>
        html {
            font-family: Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            line-height: 1.5;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        form {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .flex-body {
            min-height: 100vh;
            justify-content: center;
            display: flex;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .flex {
            margin: 13% auto;
            box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
            max-width: 810px;
            flex: 1 1 0%;
            justify-content: center;
            background-color: #fff;
            display: flex;
            max-height: 450px;
            background: url("resource/images/login_bg.png") no-repeat;
            background-size: 810px 431px;
        }

        .flex-footer {
            border-radius: .1rem;
            width: 100%;
        / / background: url("admin/images/bgg2.png") no-repeat;
            background-size: 100% 100%;
            height: 250px;
            position: fixed;
            bottom: 20px;
            z-index: -99;
        }

        .flexleft {
            width: 350px;
            height: 240px;
            padding: 9rem 0 3rem 28rem;
        }

        .login-btn {
            width: 80%;
            border-radius: 20px;
            margin-top: 20px;
            background-color: #34A29E;
            color: white;
        }

        .layui-icon {
            position: relative;
            top: 30px;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.3);
            left: 10px;
        }

        .flex-input-login {
            background-color: #F4F4F4;
            border-radius: 19px !important;
            height: 38px !important;
            padding-left: 40px !important;
        }

        .layui-icon-login {
            left: 16px !important;
            top: 28px !important;
            color: #3CA3A0;
            font-size: larger;
        }

        .layui-form-line {
            margin-top: 5px !important;
        }
    </style>
</head>
<!-- 代 码 结 构 -->
<body class="flex-body" style="min-width: 850px; min-height: 450px;">
<form class="layui-form" action="javascript:void(0);">
    <div class="flex">
        <div class="flexleft">
            <div class="layui-form-item layui-form-line">
                <i class="layui-icon layui-icon-username layui-icon-login"></i>
                <input placeholder="用户名" lay-verify="required" name="username" class="flex-input flex-input-login" autocomplete="off"
                       value=""/>
            </div>
            <div class="layui-form-item layui-form-line">
                <i class="layui-icon layui-icon-password layui-icon-login"></i>
                <input type="password" placeholder="密码" lay-verify="required" name="password" autocomplete="off"
                       class="flex-input flex-input-login" value=""/>

            </div>
            <div class="layui-form-item layui-form-line">
                <button type="button" id="btnLogin" class="pear-btn login-btn" lay-submit lay-filter="login">
                    登 录
                </button>
            </div>
        </div>
    </div>
    <div class="flex-footer">
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'button', 'popup'], function () {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        let $ = layui.jquery;
        let layer = layui.layer;

        // 登 录 提 交
        form.on('submit(login)', function (data) {
            let btn = button.load({elem: '.login'});
            $.ajax({
                url: '${ctxPath}/loginSecurity',
                data: data.field,
                type: "post",
                dataType: 'json',
                success: function (result) {
                    btn.stop(function () {
                        if (result.code == 200) {
                            popup.success("登录成功", function () {
                                location.href = "${ctxPath}/index";
                            })
                        } else {
                            popup.failure("账号密码有误！", function () {

                            });
                        }
                    })
                }
            });
            return false;
        });

        $(document.body).keydown(function (e) {
            if (e.keyCode === 13) {
                $("#btnLogin").trigger("click");
            }
        })
    })
</script>
</body>
</html>
